<template>
  <div>
    <div class="title">
      <span style="margin-right: 20px;color:gray">{{title}}</span>
      <svg
        t="1645169462912"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2216"
        width="26"
        height="26"
      >
        <path
          d="M536 480v192a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16V480a16 16 0 0 1 16-16h16a16 16 0 0 1 16 16z m-32-128h16a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16h-16a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16z m8 448c159.056 0 288-128.944 288-288s-128.944-288-288-288-288 128.944-288 288 128.944 288 288 288z m0 48c-185.568 0-336-150.432-336-336s150.432-336 336-336 336 150.432 336 336-150.432 336-336 336z"
          p-id="2217"
          fill="#8a8a8a"
        ></path>
      </svg>
    </div>
    <div class="number">
      <span style="margin-right: 20px">{{count}}</span>
      <span
        >{{number}}
        <svg
          t="1645171242820"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5597"
          width="14"
          height="14"
        >
          <path
            d="M402.535396 127.893516v438.930424h-164.589566l274.319356 329.282544 274.324476-329.282544h-164.589566V127.893516H402.535396z"
            p-id="5598"
            fill="#d81e06"
          ></path></svg
      ></span>
    </div>
    <div class="chart" ref="chart">
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props:['title','count','number'],
    //初始化echart实例
  mounted() {
    let lineChart = echarts.init(this.$refs.chart);
    lineChart.setOption({
      xAxis: {
        show: false,
        //类型为散点图,均分
        type: "category",
      },
      yAxis: {
        show: false,
      },
      series: [
        {
          type: "line",
          //曲线
          smooth: true,
          data: [60,44, 23, 90, 76,81, 35, 85, 60],
          //取消拐点
          itemStyle: {
            opacity: 0,
          },
          //线条颜色
          lineStyle: {
            color: "rgb(46, 103, 226)",
          },
          //填充颜色
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgb(46, 103, 226) ", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "white", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
      //布局调试
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
    });
  },
};
</script>

<style scoped>
.title {
  display: flex;
  align-items: center;
}
.number {
  margin-top: 20px;
}
.chart{
 width: 100%;
 height: 50px;
 color: rgb(46, 103, 226);
}
</style>